<template>
  <view class="page custom-page">
    <custom-head gradient back title="每日签到"></custom-head>

    <view class="addition">
      <view class="tab_list">

        <view class="content_top">
          <view>开启状态</view>
          <u-switch v-model="checked"></u-switch>
        </view>

        <!-- <view v-for="(item, index) in 8"> -->
          <view class="item">
            <view class="nowrap">奖项一</view>
            <view class="border">
              <!-- v-model="everyIntegralMap[index]?.number"  -->
              <u-input type="number" v-model="everyIntegralMap.one.number" placeholderStyle="fontSize: 24rpx" placeholder="请输入积分数量" />
            </view>
            <view class="border">
              <!-- v-model="everyIntegralMap[index]?.probability" -->
              <u-input type="number" v-model="everyIntegralMap.one.probability" placeholderStyle="fontSize: 24rpx" placeholder="请输入概率 (%)" />
            </view>
          </view>
        <!-- </view> -->

        <view class="item">
            <view class="nowrap">奖项二</view>
            <view class="border">
              <u-input type="number" v-model="everyIntegralMap.two.number" placeholderStyle="fontSize: 24rpx" placeholder="请输入积分数量" />
            </view>
            <view class="border">
              <u-input type="number" v-model="everyIntegralMap.two.probability" placeholderStyle="fontSize: 24rpx" placeholder="请输入概率 (%)" />
            </view>
          </view>

          <view class="item">
            <view class="nowrap">奖项三</view>
            <view class="border">
              <u-input type="number" v-model="everyIntegralMap.three.number" placeholderStyle="fontSize: 24rpx" placeholder="请输入积分数量" />
            </view>
            <view class="border">
              <u-input type="number" v-model="everyIntegralMap.three.probability" placeholderStyle="fontSize: 24rpx" placeholder="请输入概率 (%)" />
            </view>
          </view>

          <view class="item">
            <view class="nowrap">奖项四</view>
            <view class="border">
              <u-input type="number" v-model="everyIntegralMap.four.number" placeholderStyle="fontSize: 24rpx" placeholder="请输入积分数量" />
            </view>
            <view class="border">
              <u-input type="number" v-model="everyIntegralMap.four.probability" placeholderStyle="fontSize: 24rpx" placeholder="请输入概率 (%)" />
            </view>
          </view>

          <view class="item">
            <view class="nowrap">奖项五</view>
            <view class="border">
              <u-input type="number" v-model="everyIntegralMap.five.number" placeholderStyle="fontSize: 24rpx" placeholder="请输入积分数量" />
            </view>
            <view class="border">
              <u-input type="number" v-model="everyIntegralMap.five.probability" placeholderStyle="fontSize: 24rpx" placeholder="请输入概率 (%)" />
            </view>
          </view>

          <view class="item">
            <view class="nowrap">奖项六</view>
            <view class="border">
              <u-input type="number" v-model="everyIntegralMap.six.number" placeholderStyle="fontSize: 24rpx" placeholder="请输入积分数量" />
            </view>
            <view class="border">
              <u-input type="number" v-model="everyIntegralMap.six.probability" placeholderStyle="fontSize: 24rpx" placeholder="请输入概率 (%)" />
            </view>
          </view>

          <view class="item">
            <view class="nowrap">奖项七</view>
            <view class="border">
              <u-input type="number" v-model="everyIntegralMap.seven.number" placeholderStyle="fontSize: 24rpx" placeholder="请输入积分数量" />
            </view>
            <view class="border">
              <u-input type="number" v-model="everyIntegralMap.seven.probability" placeholderStyle="fontSize: 24rpx" placeholder="请输入概率 (%)" />
            </view>
          </view>

          <view class="item">
            <view class="nowrap">奖项八</view>
            <view class="border">
              <u-input type="number" v-model="everyIntegralMap.eight.number" placeholderStyle="fontSize: 24rpx" placeholder="请输入积分数量" />
            </view>
            <view class="border">
              <u-input type="number" v-model="everyIntegralMap.eight.probability" placeholderStyle="fontSize: 24rpx" placeholder="请输入概率 (%)" />
            </view>
          </view>

        <view class="bottom_text">
          <view>
            注释：1.所有奖项的概率总和需为100%;
          </view>
          <view style="text-indent:3em;">
            2.参数设置为0的时候显示谢谢参数
          </view>
        </view>
      </view>
      
      <u-button class="button" type="primary" @click="submit">确定</u-button>
    </view>
    
  </view>
</template>
<script>

export default {
  data() {
    return {
      checked: true, // 开启状态
      everyIntegralMap: { // 奖项的中的数据
        one: {
          number: '', // 数量
          probability: '', // 概率
        },
        two: {
          number: '', // 数量
          probability: '', // 概率
        },
        three: {
          number: '', // 数量
          probability: '', // 概率
        },
        four: {
          number: '', // 数量
          probability: '', // 概率
        },
        five: {
          number: '', // 数量
          probability: '', // 概率
        },
        six: {
          number: '', // 数量
          probability: '', // 概率
        },
        seven: {
          number: '', // 数量
          probability: '', // 概率
        },
        eight: {
          number: '', // 数量
          probability: '', // 概率
        },
      },
    }
  },

  computed: {
    getNumProbability: function() {
      const arr = [];
      for (let key in this.everyIntegralMap) {
        console.log('key', key, this.everyIntegralMap[key].probability)
        if (this.everyIntegralMap[key].probability) {
          arr.push(this.everyIntegralMap[key].probability)
        }
      }

      let num = arr.reduce((prev, curr) => Number(prev) + Number(curr) )
      return num > 100 ? true : false
    }
  },

  watch: {
    everyIntegralMap: {
      handler(newVal, oldVal) {
        for (let key in newVal) {
          let newIntegra = Number(newVal[key].probability);
          console.log('key', key, newIntegra)
          if (newIntegra >= 100) {
            this.everyIntegralMap[key].probability = 100
          }
          
        }
      },
      immediate:true,
      deep: true,
    }
  },

  mounted() {
  },

  methods: {
    submit() {
      console.log('0000', Object.keys(this.everyIntegralMap), '1' == 1)
     console.log('输入的内容', this.everyIntegralMap)

     let arr = [];
      for (let key in this.everyIntegralMap) {
        console.log('key', key, this.everyIntegralMap[key].probability)
        if (this.everyIntegralMap[key].probability) {
          arr.push(this.everyIntegralMap[key].probability)
        }
      }

      let num = arr.reduce((prev, curr) => Number(prev) + Number(curr) )

      console.log('num ---', arr, num)
    },
  }
}
</script>
<style scoped lang="scss">
.page {
  background-color: #ffffff;
  height: 100vh;
}
.addition {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 0 40rpx;
  height: 100%;

  .content_top {
    display: flex;
    justify-content: space-between;
    margin: 55rpx 0 40rpx;
    font-size: 30rpx;
    font-weight: 700;
  }

  .item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 30rpx;
    margin-bottom: 20rpx;

    .nowrap {
      white-space: nowrap;
      font-weight: 700;
    }

    .border {
      display: flex;
      justify-content: center;
      align-items: center;
      border: 2rpx solid #f0f0f0;
      width: 227rpx;
      height: 80rpx;
      padding: 0 10rpx;
    }
  }

  .bottom_text {
    font-size: 28rpx;
    margin-top: 47rpx;
  }
  .button {
      width: 100%;
      height: 88rpx;
      border-radius: 44rpx;
      margin: 80rpx 0 40rpx 0;
      background-color: #2979ff;
      color: #fff;
      font-size: 32rpx;
      text-align: center;
      line-height: 88rpx;
    }
}
</style>
